import React from 'react'
import { 
  TrendingUp, 
  TrendingDown, 
  Leaf, 
  Shield, 
  BarChart3, 
  FileText,
  ArrowUpRight,
  ArrowDownRight,
  Calendar,
  Clock,
  CheckCircle,
  AlertTriangle
} from 'lucide-react'
import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'

// Mock数据
const kpiData = [
  {
    title: '总碳足迹',
    value: '2,847',
    unit: 'tCO2e',
    change: '+12.5%',
    trend: 'up',
    icon: Leaf,
    color: 'text-green-600',
    bgColor: 'bg-green-50'
  },
  {
    title: 'ESG评分',
    value: '78.5',
    unit: '分',
    change: '+5.2%',
    trend: 'up',
    icon: BarChart3,
    color: 'text-blue-600',
    bgColor: 'bg-blue-50'
  },
  {
    title: '合规率',
    value: '94.2',
    unit: '%',
    change: '-2.1%',
    trend: 'down',
    icon: Shield,
    color: 'text-purple-600',
    bgColor: 'bg-purple-50'
  },
  {
    title: '报告数量',
    value: '156',
    unit: '份',
    change: '+8.3%',
    trend: 'up',
    icon: FileText,
    color: 'text-orange-600',
    bgColor: 'bg-orange-50'
  }
]

const chartData = [
  { month: '1月', carbon: 240, esg: 72, compliance: 92 },
  { month: '2月', carbon: 235, esg: 73, compliance: 93 },
  { month: '3月', carbon: 250, esg: 75, compliance: 91 },
  { month: '4月', carbon: 245, esg: 76, compliance: 94 },
  { month: '5月', carbon: 260, esg: 77, compliance: 93 },
  { month: '6月', carbon: 285, esg: 79, compliance: 94 },
]

const pieData = [
  { name: '范围一', value: 35, color: '#10B981' },
  { name: '范围二', value: 45, color: '#3B82F6' },
  { name: '范围三', value: 20, color: '#F59E0B' },
]

const recentActivities = [
  {
    id: 1,
    type: 'success',
    title: '碳足迹数据更新完成',
    description: '2024年6月碳足迹数据已成功更新',
    time: '2分钟前',
    icon: CheckCircle
  },
  {
    id: 2,
    type: 'warning',
    title: '合规检查提醒',
    description: 'ESG合规检查将于本周五到期',
    time: '1小时前',
    icon: AlertTriangle
  },
  {
    id: 3,
    type: 'success',
    title: 'ESG评估报告生成',
    description: 'Q2 ESG评估报告已生成完成',
    time: '3小时前',
    icon: CheckCircle
  },
  {
    id: 4,
    type: 'success',
    title: '数据分析完成',
    description: 'AI驱动的ESG数据分析已完成',
    time: '5小时前',
    icon: CheckCircle
  }
]

const quickActions = [
  { name: '数据录入', href: '/workbench', icon: TrendingUp, color: 'bg-blue-500' },
  { name: '报告生成', href: '/reporting', icon: FileText, color: 'bg-green-500' },
  { name: '合规检查', href: '/compliance', icon: Shield, color: 'bg-purple-500' },
  { name: '数据分析', href: '/analytics', icon: BarChart3, color: 'bg-orange-500' },
]

function Dashboard() {
  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">仪表板</h1>
          <p className="text-gray-600">欢迎回来，这里是您的ESG管理概览</p>
        </div>
        <div className="flex items-center space-x-2 text-sm text-gray-500">
          <Calendar className="w-4 h-4" />
          <span>最后更新：{new Date().toLocaleDateString('zh-CN')}</span>
        </div>
      </div>

      {/* KPI卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {kpiData.map((kpi) => {
          const Icon = kpi.icon
          return (
            <div key={kpi.title} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div className={`w-12 h-12 ${kpi.bgColor} rounded-lg flex items-center justify-center`}>
                  <Icon className={`w-6 h-6 ${kpi.color}`} />
                </div>
                <div className={`flex items-center text-sm font-medium ${
                  kpi.trend === 'up' ? 'text-green-600' : 'text-red-600'
                }`}>
                  {kpi.trend === 'up' ? (
                    <ArrowUpRight className="w-4 h-4 mr-1" />
                  ) : (
                    <ArrowDownRight className="w-4 h-4 mr-1" />
                  )}
                  {kpi.change}
                </div>
              </div>
              <div className="mt-4">
                <p className="text-sm font-medium text-gray-600">{kpi.title}</p>
                <p className="text-2xl font-bold text-gray-900">
                  {kpi.value}
                  <span className="text-sm font-normal text-gray-500 ml-1">{kpi.unit}</span>
                </p>
              </div>
            </div>
          )
        })}
      </div>

      {/* 图表区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 趋势图表 */}
        <div className="lg:col-span-2 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">ESG指标趋势</h3>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Area type="monotone" dataKey="carbon" stackId="1" stroke="#10B981" fill="#10B981" fillOpacity={0.3} />
              <Area type="monotone" dataKey="esg" stackId="1" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.3} />
              <Area type="monotone" dataKey="compliance" stackId="1" stroke="#8B5CF6" fill="#8B5CF6" fillOpacity={0.3} />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        {/* 饼图 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">碳足迹分布</h3>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={pieData}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={100}
                paddingAngle={5}
                dataKey="value"
              >
                {pieData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
          <div className="mt-4 space-y-2">
            {pieData.map((item) => (
              <div key={item.name} className="flex items-center justify-between text-sm">
                <div className="flex items-center">
                  <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: item.color }}></div>
                  <span className="text-gray-600">{item.name}</span>
                </div>
                <span className="font-medium">{item.value}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 快速操作和最近活动 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 快速操作 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">快速操作</h3>
          <div className="grid grid-cols-2 gap-4">
            {quickActions.map((action) => {
              const Icon = action.icon
              return (
                <button
                  key={action.name}
                  className="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-200"
                >
                  <div className={`w-12 h-12 ${action.color} rounded-lg flex items-center justify-center mb-3`}>
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <span className="text-sm font-medium text-gray-900">{action.name}</span>
                </button>
              )
            })}
          </div>
        </div>

        {/* 最近活动 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">最近活动</h3>
          <div className="space-y-4">
            {recentActivities.map((activity) => {
              const Icon = activity.icon
              return (
                <div key={activity.id} className="flex items-start space-x-3">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                    activity.type === 'success' ? 'bg-green-100' : 'bg-yellow-100'
                  }`}>
                    <Icon className={`w-4 h-4 ${
                      activity.type === 'success' ? 'text-green-600' : 'text-yellow-600'
                    }`} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900">{activity.title}</p>
                    <p className="text-sm text-gray-600">{activity.description}</p>
                    <div className="flex items-center mt-1 text-xs text-gray-500">
                      <Clock className="w-3 h-3 mr-1" />
                      {activity.time}
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Dashboard 